<template>
    <div class="page" ref="page">
        <div class="wrap">
            <ul>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>标题</li>
                <li>最后一个标题</li>
            </ul>
        </div>
    </div>
</template>

<script>
    import BetterScroll from "better-scroll";
  export default {
    name: 'better-scroll',
    mounted() {
      this.bScroll=new BetterScroll(this.$refs['page'],{
        scrollX:true,//开启横向滚动
      })
    }
  };
</script>

<style scoped>
    .page{width:100%;height:96vh;overflow: hidden;}
    .wrap{width:100%;height: auto;white-space: nowrap;display: table}
    .wrap li{width:100px;height:40px;display: inline-block;}
</style>
